<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../dist/HMap.css" type="text/css">
</head>
<body>
<div id="map"></div>
<script src="../node_modules/openlayers/dist/ol-debug.js"></script>
<script type="text/javascript">
  var center = ol.proj.transform([116.22812005, 39.95740819], 'EPSG:4326', 'EPSG:3857'); //设置地图中心
  var baseLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });
  //创建地图
  var map = new ol.Map({
    view: new ol.View({
      center: [116.22812005, 39.95740819],
      zoom: 0,
      projection: 'EPSG:4326'
    }),
    target: 'map',
    layers: [baseLayer]
  });
  var options = {
    strokeColor: '#F90B0B',
    strokeWidth: 10
  };
  var vector = new ol.layer.Vector({
    source: new ol.source.Vector({})
  });
  var geom = {
    "attributes": {
      "OBJECTID": "1",
      "ID": "ecc9f2ba-f899-4adb-a86a-284d81bf2911",
      "LXDM": "G35",
      "LXMC": "济广高速",
      "QDMC": "南城东互通下行出口",
      "QDZH": "1228.5190000000",
      "QDPY": "0.0000000000",
      "ZDMC": "长链终点",
      "ZDZH": "1223.8980000000",
      "ZDPY": "0.0000000000",
      "LC": "4.6210000000",
      "YJND": "2010",
      "SXXFX": "2.0000000000",
      "DLLXBM": "0.0000000000",
      "DWMC": " ",
      "DRR": " "
    },
    "geometry": "LINESTRING (116.65963672 27.54180288, 116.65965167 27.54218, 116.65969833 27.542745, 116.65974 27.54312333, 116.65977167 27.54331, 116.65984 27.543685, 116.65991833 27.54406, 116.66001 27.54443, 116.66005833 27.544615, 116.66016333 27.54498333, 116.66028333 27.54534833, 116.660415 27.54571167, 116.66048504 27.54588757, 116.66048667 27.54589167, 116.66063667 27.54625, 116.66079667 27.54660333, 116.66088167 27.54678, 116.66105667 27.54712833, 116.66124333 27.54747167, 116.66143833 27.547815, 116.66166975 27.54821414, 116.661735 27.54832667, 116.66194 27.54866667, 116.66204167 27.54883833, 116.66224333 27.54918167, 116.66244333 27.549525, 116.66254167 27.54969667, 116.66281833 27.55022167, 116.66290333 27.55039833, 116.66306167 27.55075, 116.66313333 27.55092833, 116.663325 27.55145833, 116.663375 27.55163333, 116.66346833 27.55198167, 116.66351167 27.552155, 116.66360667 27.55267, 116.66363333 27.55284167, 116.66367667 27.55319, 116.6637 27.55354, 116.663705 27.553715, 116.66370333 27.55424333, 116.66368167 27.554595, 116.663645 27.55495, 116.66359333 27.55529833, 116.66353 27.555635, 116.66349167 27.5558, 116.663405 27.55612833, 116.663355 27.55629167, 116.66319167 27.55678, 116.66313167 27.55694167, 116.66299333 27.55726667, 116.66283833 27.55759167, 116.66275667 27.55775667, 116.66257833 27.558085, 116.66227833 27.55857, 116.66217 27.55873, 116.66183 27.55921333, 116.66159167 27.559535, 116.66135 27.55985667, 116.66122667 27.56001667, 116.660985 27.56034, 116.66075 27.56066833, 116.660525 27.56100167, 116.66041667 27.56117167, 116.66012 27.56168833, 116.66003 27.56186333, 116.65986 27.56221833, 116.65978167 27.56239667, 116.65963667 27.56275333, 116.65951667 27.56311167, 116.65940833 27.56347, 116.65932 27.56382833, 116.65921833 27.56436333, 116.65919333 27.56454, 116.65915333 27.56489333, 116.65912833 27.56524333, 116.65912833 27.56559333, 116.65914333 27.56594, 116.65915167 27.56611333, 116.659175 27.56645667, 116.65921833 27.56679667, 116.65927833 27.56713333, 116.65931333 27.56730167, 116.659395 27.56763333, 116.65949333 27.56797333, 116.65954833 27.56814333, 116.65966833 27.56848, 116.659875 27.56898167, 116.65995 27.56914833, 116.66017667 27.56964667, 116.66033333 27.56997667, 116.660485 27.57031, 116.66056333 27.57047833, 116.66079833 27.57098333, 116.66087833 27.57115167, 116.66103667 27.57149333, 116.661195 27.571835, 116.66135667 27.57218167, 116.66143833 27.572355, 116.661605 27.57270667, 116.66177167 27.57306, 116.66194167 27.57341833, 116.66202667 27.57359833, 116.662275 27.57414333, 116.66236333 27.574325, 116.662535 27.57469167, 116.66270667 27.57505667, 116.66287667 27.57541833, 116.66312833 27.575955, 116.66321 27.57613167, 116.66345333 27.57665333, 116.66353333 27.576825, 116.663695 27.577165, 116.66385667 27.57750333, 116.663935 27.57767167, 116.66409167 27.57800667, 116.66424 27.57834333, 116.66437833 27.578685, 116.66450667 27.579025, 116.66457 27.57919333, 116.66469167 27.57953167, 116.664805 27.57986833, 116.66491 27.58020333, 116.665005 27.58053833, 116.665125 27.58104, 116.66519333 27.58137667, 116.665225 27.58154667, 116.66530667 27.58206, 116.66535 27.582405, 116.66536667 27.58257833, 116.6654 27.582925, 116.66542667 27.58326667, 116.665435 27.58343667, 116.66544667 27.58377667, 116.66544667 27.58382465)",
    "geometryType": "MLineString"
  };
  var feature = new ol.Feature({
    geometry: new ol.format.WKT().readGeometry(geom['geometry'])
  });
  var style = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 1],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      src: 'images/marker.png'
    }),
    text: new ol.style.Text({
      text: 1 + "",
      offsetX: 0.5,
      offsetY: -28,
      font: "16px serif",
      fill: new ol.style.Fill({
        color: "#636363"
      })
    })
  })
  map.on('click',function (ev) {
    console.log(ev)
  })
  feature.setStyle(style)
  vector.getSource().addFeature(feature);
  map.addLayer(vector);
</script>
<!--<script src="../dist/HMap.js"></script>-->
<!--<script>-->
  <!--HMap.P = function () {}-->
  <!--HMap.P.prototype.init = function (params) {-->
    <!--this.options = params || {};-->
  <!--}-->
  <!--HMap.P.prototype.getParams = function () {-->
    <!--return this.options;-->
  <!--}-->
<!--</script>-->
<!--<script type="application/javascript">-->
  <!--var P = new HMap.P();-->
  <!--P.init('test');-->
  <!--var res = P.getParams();-->
  <!--console.log(res)-->
<!--</script>-->
</body>
</html>